<!--  @author:ymy  -->
<template>
  <div class="works" @scroll="scrollEvent">
    <div class="content">
      <div class="workRank">
        <div class="rankTitle">
          <img src="https://assets-cdn.lanqb.com/pc_community/icon-tops.svg" />指绘排行榜
        </div>
        <div class="work-show">
          <div :class="{ littleImg: true }" v-for="item in rankData" :key="item.id">
            <div class="little-heart">
              <img
                :src="'https://ss.lanqb.com/' + item.works[0].url + '?imageView2/1/w/470/h/354'"
                alt=""
              />
            </div>
            <span class="heart">
              <van-icon name="like-o" />
              <span>{{ item.statistics.like_num }}</span>
            </span>
          </div>
        </div>
        <div class="workBtn">查看更多</div>
      </div>
      <div class="workList">
        <div class="list-title">
          <img src="https://assets-cdn.lanqb.com/pc_community/icon-recommend.svg" class="icon" />
          <div :class="{ active: active == 1 }" @click="active = 1">最新指绘</div>
          <div :class="{ active: active == 0 }" @click="active = 0">精选指绘</div>
        </div>
        <div class="list-items">
          <div class="list-item" v-for="item in listData" :key="item.id">
            <img
              :src="'https://ss.lanqb.com/' + item.works.url + '?imageView2/1/w/245/h/184'"
              alt=""
            />
            <span class="heart">
              <van-icon name="like-o" />
              <span>{{ item.statistics.like_num }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Works',
  data() {
    return {
      curPage: 1,
      rankData: [],
      listData: [],
      active: 1,
    };
  },
  async created() {
    // https://m.lanqb.com/api/works?type=3&page=1
    this.loadMoreGet('/lqb/api/works?type=3&page=1').then(({ data }) => {
      this.listData = data;
    });
    this.loadMoreGet(
      '/lqb/api/works/workRanking?ranking_type=1&work_type=3&work_time=2021-12-27'
    ).then(({ data }) => {
      this.rankData = data.slice(0, 3);
    });
  },
  methods: {
    scrollEvent(e) {
      const st = e.target.scrollTop;
      const totalHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (st + clientHeight >= totalHeight) {
        this.curPage++;
        if (this.active) {
          this.loadMoreGet(`/lqb/api/works?type=3&page=${this.curPage}`).then(({ data }) => {
            this.listData = this.listData.concat(data);
          });
        } else {
          this.loadMoreGet(`/lqb/api/works?type=3&to_top=1&page=${this.curPage}`).then(
            ({ data }) => {
              this.listData = this.listData.concat(data);
            }
          );
        }
      }
    },
    async loadMoreGet(url) {
      const response = await this.axiosRq(url, 'GET');
      return response;
    },
  },
  watch: {
    active(val) {
      this.curPage = 1;
      if (val) {
        this.listData = [];
        this.loadMoreGet('/lqb/api/works?type=3&page=1').then(({ data }) => {
          this.listData = data;
        });
      } else {
        this.listData = [];
        this.loadMoreGet('/lqb/api/works?type=3&to_top=1&page=1').then(({ data }) => {
          this.listData = data;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
html {
  overflow: hidden;
}
.works {
  overflow: auto;
  height: 5.3rem;
  background-color: #f4f4f4;
  .heart {
    position: absolute;
    bottom: 0.05rem;
    right: 0.1rem;
    color: white;
    z-index: 10;
    span {
      margin-left: 0.05rem;
      font-size: 0.12rem;
    }
  }
  > .content {
    > .workRank {
      height: 1.55rem;
      width: 100vw;
      padding: 0.15rem 0 0.15rem;
      margin-bottom: 0.1rem;
      background-color: white;
      > .rankTitle {
        height: 0.2rem;
        text-align: left;
        line-height: 0.2rem;
        font-size: 0.14rem;
        padding-left: 0.35rem;
        position: relative;
        img {
          position: absolute;
          top: 0px;
          left: 0.1rem;
          width: 0.18rem;
          height: 0.18rem;
        }
      }
      > .work-show {
        height: 0.92rem;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 0.1rem 0.1rem 0;
        .little-heart:after {
          background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 97%);
          position: absolute;
          top: 0;
          left: 0;
          width: 1.135rem;
          height: 0.85rem;
          content: '';
        }
        > .bigImg {
          width: 2.35rem;
          height: 1.84rem;
          position: relative;
          img {
            width: 2.35rem;
            height: 1.84rem;
          }
        }
        > .littleImg {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: center;
          position: relative;
          > .little-heart {
            img {
              width: 1.135rem;
              height: 0.85rem;
            }
          }
        }
      }
      > .workBtn {
        width: 1.25rem;
        height: 0.325rem;
        border-radius: 0.2rem;
        background-color: #089fee;
        color: white;
        margin: 0 auto;
        text-align: center;
        line-height: 0.325rem;
        margin-top: 0.05rem;
        font-size: 0.12rem;
      }
    }
    > .workList {
      position: relative;
      background-color: white;
      > .list-title {
        display: flex;
        padding-left: 0.3rem;
        height: 0.4rem;
        line-height: 0.4rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.14rem;
        color: #a4a4a4;
        margin-bottom: 0.1rem;
        div {
          margin-left: 0.1rem;
        }
        img {
          position: absolute;
          top: 0.1rem;
          left: 0.1rem;
          width: 0.18rem;
          height: 0.18rem;
        }
      }
      .active {
        border-bottom: 0.03rem solid #222222;
        color: #222222;
      }
      > .list-items {
        display: flex;
        flex-wrap: wrap;
        > .list-item::after {
          background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 97%);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          content: '';
        }
        > .list-item {
          width: 1.74rem;
          height: 1.305rem;
          position: relative;
          margin-left: 0.07rem;
          margin-bottom: 0.07rem;
          img {
            width: 1.74rem;
            height: 1.305rem;
          }
        }
      }
    }
  }
}
</style>
